import React, { Component } from 'react';
import { Form, Input, Button, Checkbox, Icon } from 'antd';
import md5 from 'md5';

const FormItem = Form.Item;

class LoginForm extends Component {
    handleSubmit (e) {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                values.password = md5(values.password);
                this.props.onSubmitHandle({
                    login_name: values.userName,
                    password: values.password,
                });
            }
        });
    }
    render () {
        const { form: {getFieldDecorator}, isFetching } = this.props;
        let buttonInner = '登录';
        if (isFetching === 'isFetching') {
            buttonInner = <Icon type="loading" />;
        } else {
            buttonInner = '登录';
        }
        return (
            <Form onSubmit={this.handleSubmit.bind(this)}>
                <FormItem>
                    {getFieldDecorator('userName', {
                        rules: [{ required: true, message: '请输入你的用户名！' }],
                    })(
                        <Input prefix={<Icon type="user" style={{ fontSize: 13 }} />} placeholder="Username" />
                    )}
                </FormItem>
                <FormItem>
                    {getFieldDecorator('password', {
                        rules: [{ required: true, message: '请输入你的密码!' }],
                    })(
                        <Input prefix={<Icon type="lock" style={{ fontSize: 13 }} />} type="password" placeholder="Password" />
                    )}
                </FormItem>
                <FormItem>
                    {getFieldDecorator('remember', {
                        valuePropName: 'checked',
                        initialValue: true,
                    })(
                        <Checkbox>记住我</Checkbox>
                    )}
                    <a className="login-form-forgot" href="">忘记密码</a>
                    <Button type="primary" htmlType="submit" className="login-form-button">
                        { buttonInner }
                    </Button>
                </FormItem>
            </Form>
        );
    }
}
export default Form.create()(LoginForm);
